<template>
  <div class="style-2">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h1 style="display:flex">
            <div class="logo">
              <a style="display:block;height:85px;" :href="GLOBAL.RNTY_BASE_URL">睿那体育</a>
            </div>
          </h1>
          <!-- Start Sign In Form -->
          <div class="fh5co-form animate-box fadeIn">
            <el-form :model="loginForm" :rules="loginFormRule" ref="loginForm" class="loginForm">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="loginForm.username" placeholder="用户名/邮箱/手机号"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password" 
                    @keyup.enter.native="submitForm('loginForm')"  >
                <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
              </el-form-item>
              <el-form-item prop="remember">
                <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
                <!-- 注册 -->
                <router-link :to='"/register"' tag="span" class="register">点我注册</router-link>
                <router-link :to='"/findPwd"' tag="span" class="register">修改密码</router-link>
              </el-form-item>
              <el-form-item>
                <el-button :loading="loading.login" type="primary" 
                    @click="submitForm('loginForm')">登录{{loading.login ? '...' : ''}}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- END Sign In Form -->
        </div>
      </div>
      <div class="row" style="padding-top: 60px; clear: both;">
        <div class="col-md-12 text-center">
          <p>
            <small>&copy; 版权所有 睿那体育 RNTV</small>
            <br/>
            <small>&copy;产品开发商 羽戈科技 YG</small>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import md5 from "md5";
axios.defaults.withCredentials = true;

export default {
  name: "loginPage",
  data() {
    return {
      msg:'',
      auth_code:"",
      loading: {
        login: false
      },
      loginForm: {
        username: "",
        password: "",
        remember: false
      },
      dialogFormVisible: false,
      redirect_url: this.GLOBAL.RNTY_SHOP_PC_URL,
      loginFormRule: {
        username: {
          required: true,
          message: "请输入用户名或邮箱",
          trigger: "blur"
        },
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    //判断是否属于睿那旗下产品
    this.auth_code = this.$cookie.get("auth_code");
    if (this.auth_code) {
      this.GLOBAL.isRN(this)
    }
  },
  mounted() {
    this.loginForm.username = this.$cookie.get("rnty_username");
    if (this.$cookie.get("rnty_remember")) {
      this.loginForm.remember = true;
      this.loginForm.password = this.$cookie.get("rnty_password");
    }
  },
  methods: {
    open6() {

    },
    submitForm(formName) {
      //提交登录信息
      this.auth_code = this.$cookie.get("auth_code");
      // this.GLOBAL.isRN(this);
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading.login = true;
          this.GLOBAL.request({
            method: "post",
            baseURL: this.GLOBAL.API_ACCOUNT_RNTY_URL,
            url: "users/login",
            data:{
              username:this.loginForm.username,
              password:md5(this.loginForm.password),
              remember: this.loginForm.remember
            }
          }).then(
            //返回登录信息后存储到对应cookie
            ({data:data}) => {
              if (data.status === 1) {
                // alert(data.data.access_token)
                this.$cookie.set("rnty_access_token", data.data.access_token,{ expires: 1, domain: '.ruinatiyu.com'});
                this.loading.login = false;
                this.$cookie.set("rnty_username", this.loginForm.username,{ domain: '.ruinatiyu.com'});
                this.$cookie.set(
                  "rnty_remember",
                  this.loginForm.remember ? 1 : "",
                  ""
                );
                this.$cookie.set(
                  "rnty_password",
                  this.loginForm.remember ? this.loginForm.password : "",
                  ""
                );
                this.GLOBAL.tokenRequest({
                  baseURL:this.GLOBAL.API_ACCOUNT_RNTY_URL,
                  url:'users/info'
                }).then(({data:data})=>{
                  this.$cookie.set("rnty_userimg",data.headImg,{ domain: '.ruinatiyu.com'});
                })
                window.location.href = this.redirect_url;
              }else if(data.status === 0){
                this.$notify.error({
                  title: '错误',
                  message: data.message
                })
                setTimeout(()=>{this.$router.go(0)},1000)
              }
            },
            error => {
              this.loading.login = false;
              if (error.response && error.response.status === 422) {
                this.$message.error({
                  message: error.response.data[0].message
                });
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
@import "../assets/css/login.css";

.form-control {
  width: 200px;
}

.loginForm {
  width: 400px;
  margin: 0 auto;
}
.register {
  color: #409eff;
  cursor: pointer;
  padding-left: 5px;
}
.fh5co-form{
  margin-top:0 !important;
}
.logo{
  height:85px;
  width:160px;
  margin: 0 auto;
  text-indent: -9999px;
  background: url('../assets/images/logo.png') no-repeat 0 5px;
  background-size: 160px 80px;
}
</style>
